<template>
    <d2-container>
        <div class="muse_filter_box">
            <el-form ref="filtersForm" :model="form">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item>
                            <el-input placeholder="名字" v-model="form.title"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" @click="filterSearch('filtersForm')">搜索</el-button>
                        <el-button @click="resetForm('filtersForm')">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="muse_table_box">
            <div class="muse_control_box">
                <el-button class="muse_float_left" type="primary" @click="addData">添加</el-button>
                <el-button @click="deleteSelected">删除选中</el-button>
                <el-button @click="deleteAll">删除全部</el-button>
            </div>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column fixed type="selection" width="55"/>
                <el-table-column prop="title" label="标题"/>
                <el-table-column prop="image" label="图片">
                  <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px"
                          :src="scope.row.image"
                          fit="contain"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="createdAt" label="创建时间">
                    <template slot-scope="scope">
                        {{ scope.row.createdAt | date('YYYY-MM-DD HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <el-button @click="editRow(scope.row)" type="text" size="small">编辑</el-button>
                        <!-- <el-button @click="upOrDown(scope.row)" type="text" size="small">上线</el-button> -->
                        <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    class="muse_pagination"
                    :background="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="paging.page"
                    :page-sizes="paging.pageSizeAry"
                    :page-size="paging.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paging.total">
            </el-pagination>
        </div>
    </d2-container>
</template>

<script>
  import tableMixin from '../mixins/tableMixin'
  import { getAdvertisementList, deleteAdvertisement } from '@/api/admin'
  export default {
    name: 'adList',
    mixins: [tableMixin],
    data () {
      return {
        form: {
          account: ''
        }
      }
    },
    created () {
      this.getTableData()
    },
    beforeRouteEnter(to, from, next) {
      next(vm=>{
        vm.getTableData()
      })
    },
    methods: {
      // 获取列表数据
      async getTableData(value, type) {
        let params = {
          page: type === 'page'? (value ? value : this.paging.page) : this.paging.page,
          pageSize: type === 'pageSize'? (value ? value : this.paging.pageSize) : this.paging.pageSize
        }
        params = Object.assign({}, params, this.form)
        const { code, data: { total, currentPage, data, pageSize } } = await getAdvertisementList(params)
        this.paging.total = total
        this.paging.pageSize = pageSize
        this.paging.page = currentPage
        this.tableData = data
      },
      // 添加数据
      addData () {
        this.$router.push({name: 'changeAd'})
      },
      // 删除选中行
      deleteSelected() {
        this.wrapConfirm(1).then(() => {
          console.log('delete selected row')
        }).catch(() => {})
      },
      // 删除全部
      deleteAll() {
        this.wrapConfirm(0).then(() => {
          console.log('delete all')
        }).catch(() => {})
      },
      // 编辑该行
      editRow(row) {
        this.$router.push({name: 'changeAd', query: { id: row._id}})
        console.log('edit row', row)
      },
      // 上线或下线
      upOrDown(row) {
        this.wrapConfirm(2).then(() => {
          console.log('up or down row', row)
        }).catch(() => {})
      },
      // 删除该行
      deleteRow(row) {
        this.wrapConfirm(4).then(async () => {
          const res = await deleteAdvertisement({id: row._id})
          this.getTableData()
        }).catch(() => {})
      }
    }
  }
</script>

<style scoped>

</style>
